<template>
    <div class="login-wrap">
        <div class="login-form">
            <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto">
                <el-form-item label="用户名(admin)" prop="username">
                    <el-input v-model="ruleForm.username" />
                </el-form-item>
                <el-form-item label="密码(admin)" prop="password">
                    <el-input v-model="ruleForm.password" />
                </el-form-item>
                <el-form-item class="form-item-center">
                    <el-button type="primary" @click="submitForm"> 登录 </el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { useUserStore } from '@/store/user';
import { reactive, ref } from 'vue';
import type { FormInstance, FormRules } from 'element-plus';
import { useRouter } from 'vue-router';
import { log } from 'console';
const userStore = useUserStore();
const router = useRouter();

interface RuleForm {
    username: string;
    password: string;
}
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
    username: 'admin',
    password: 'admin'
});

const rules = reactive<FormRules<RuleForm>>({
    username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
});

const submitForm = () => {
    userStore
        .storeUserLogin(ruleForm)
        .then((res) => {
            console.log('res', res);
            router.push('/');
        })
        .catch((err) => {
            console.log('err', err);
        });
};
</script>
<style lang="less" scoped>
.login-form {
    width: 400px;
    margin: 0 auto;
    margin-top: 50px;
}
::v-deep .form-item-center .el-form-item__content {
    display: flex;
    justify-content: center;
}
</style>
